<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>hello vue</title>
<style type="text/css">

	[v-cloak]{
		display: none;
	}

</style>
</head>
<body>
	


<div id="app">

	<button @click="lang">浪起来</button>
	<button @click="stop">别浪了，猥琐发育等后期</button>

	<h4>{{msg}}</h4>


</div>










<script src="vue.js"></script>

<script type="text/javascript">

var app = new Vue({
  el: '#app',

  data: {
  	msg:"猥琐发育，别浪~~！",
  	clearInterId:null //在data上定义定时器停止
  },

  methods:{

  	lang(){
  		// console.log(this.msg)
  		
  		//原生VUE写法，将this赋值使用
  		var that = this
  		setInterval(function(){
		  	//获取到头的第一个字符
		  		var start = that.msg.substring(0,1)
		  	//获取到 后面的所有字符
		  		var end = that.msg.substring(1)
		  	//重新拼接成新的字符串并且赋值给 that.msg
		  		that.msg = end+start
  		},400)


//		ES6 写法,解决this的指向问题
/*  		setInterval( ()=>{
		  	//获取到头的第一个字符
		  		var start = this.msg.substring(0,1)
		  	//获取到 后面的所有字符
		  		var end = this.msg.substring(1)
		  	//重新拼接成新的字符串并且赋值给 this.msg
		  		this.msg = end+start
  		},400)*/

  	},

  	stop(){
  		clearInterval(this.clearInterId)
  	}

  }

})





</script>

	
</body>
</html>